<template>
  <div class="app-container">
    <TitleBar
      title="购买力筛选"
      refresh
    />
    <banner class="title">
      <div slot="title" class="title-left">
        <div />
        <p>购买力筛选</p>
      </div>
      <el-button class="btn-gradient" type="primary" icon="el-icon-refresh">刷新</el-button>
    </banner>
    <div class="query">
      <el-input
        v-model="query"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
      />
      <div class="query-sure">确定</div>
    </div>
    <!--    <div class="screen">-->
    <!--      <div>-->
    <!--        <p>最近消费：</p>-->
    <!--        <div class="screen-option">-->
    <!--          <el-radio-group-->
    <!--            v-model="lately"-->
    <!--            :border="false"-->
    <!--            text-color="#fff"-->
    <!--            fill="#488DFF"-->
    <!--          >-->
    <!--            <el-radio-button label="不限" />-->
    <!--            <el-radio-button label="一周内" />-->
    <!--            <el-radio-button label="两周内" />-->
    <!--            <el-radio-button label="一个月内" />-->
    <!--            <el-radio-button label="一个月前" />-->
    <!--            <el-radio-button label="两个月前" />-->
    <!--            <el-radio-button label="三个月前" />-->
    <!--            <el-radio-button label="六个月前" />-->
    <!--          </el-radio-group>-->
    <!--          <el-button type="text">自定义</el-button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <p>消费次数：</p>-->
    <!--        <div class="screen-option">-->
    <!--          <el-radio-group-->
    <!--            v-model="frequency"-->
    <!--            :border="false"-->
    <!--            text-color="#fff"-->
    <!--            fill="#488DFF"-->
    <!--          >-->
    <!--            <el-radio-button label="不限" />-->
    <!--            <el-radio-button label="1次+" />-->
    <!--            <el-radio-button label="2次+" />-->
    <!--            <el-radio-button label="3次+" />-->
    <!--            <el-radio-button label="4次+" />-->
    <!--            <el-radio-button label="10次+" />-->
    <!--            <el-radio-button label="20次+" />-->
    <!--            <el-radio-button label="30次+" />-->
    <!--            <el-radio-button label="40次+" />-->
    <!--          </el-radio-group>-->
    <!--          <el-button type="text">自定义</el-button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <p>消费金额：</p>-->
    <!--        <div class="screen-option">-->
    <!--          <el-radio-group-->
    <!--            v-model="money"-->
    <!--            :border="false"-->
    <!--            text-color="#fff"-->
    <!--            fill="#488DFF"-->
    <!--          >-->
    <!--            <el-radio-button label="不限" />-->
    <!--            <el-radio-button label="0-50" />-->
    <!--            <el-radio-button label="51-100" />-->
    <!--            <el-radio-button label="101-150" />-->
    <!--            <el-radio-button label="151-200" />-->
    <!--            <el-radio-button label="201-300" />-->
    <!--            <el-radio-button label="301-500" />-->
    <!--            <el-radio-button label="501-1000" />-->
    <!--          </el-radio-group>-->
    <!--          <el-button type="text">自定义</el-button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <p>用户等级：</p>-->
    <!--        <div class="screen-option">-->
    <!--          <el-radio-group-->
    <!--            v-model="level"-->
    <!--            :border="false"-->
    <!--            text-color="#fff"-->
    <!--            fill="#488DFF"-->
    <!--          >-->
    <!--            <el-radio-button label="不限" />-->
    <!--            <el-radio-button label="普通用户" />-->
    <!--            <el-radio-button label="黄金用户" />-->
    <!--            <el-radio-button label="白金用户" />-->
    <!--            <el-radio-button label="砖石用户" />-->
    <!--          </el-radio-group>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <p>用户标签：</p>-->
    <!--        <div class="screen-option">-->
    <!--          <el-radio-group-->
    <!--            v-model="userLabel"-->
    <!--            :border="false"-->
    <!--            text-color="#fff"-->
    <!--            fill="#488DFF"-->
    <!--          >-->
    <!--            <el-radio-button label="不限" />-->
    <!--            <el-radio-button label="标签名称" />-->
    <!--          </el-radio-group>-->
    <!--          <el-button type="text">自定义</el-button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="data-lie">
      <h1>数据列表</h1>
      <div class="select-box">
        <!--        <div>-->
        <!--          <el-select-->
        <!--            v-model="value"-->
        <!--            placeholder="群发短信"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in messageSelect"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select-->
        <!--            v-model="value"-->
        <!--            placeholder="群发站内信"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in mailSelect"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select-->
        <!--            v-model="value"-->
        <!--            placeholder="APP推送"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in pushSelect"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select-->
        <!--            v-model="value"-->
        <!--            placeholder="设置标签"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in labelSelect"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select-->
        <!--            v-model="value"-->
        <!--            placeholder="导出数据"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in exportData"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select-->
        <!--            v-model="value"-->
        <!--            placeholder="显示条数"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in showNumber"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <div>
          <el-select
            v-model="value"
            placeholder="排序方式"
          >
            <el-option
              v-for="item in sortSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="edge" />
      <template>
        <el-table
          ref="multipleTable"
          class="table-class"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          />
          <el-table-column
            align="center"
            label="用户ID"
          >
            <template slot-scope="scope">{{ scope.row.userCode }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="用户账号"
          />
          <el-table-column
            align="center"
            prop="levelName"
            label="会员等级"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="totalPrice"
            label="消费金额"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="count"
            label="消费次数"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="averagePrice"
            label="订单均价"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="payTime"
            label="最近购买时间"
            show-overflow-tooltip
          />
          <!--          <el-table-column-->
          <!--            fixed="right"-->
          <!--            label="操作"-->
          <!--            align="center"-->
          <!--            width="100"-->
          <!--          >-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button-->
          <!--                type="text"-->
          <!--                size="small"-->
          <!--              >查看</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </template>
      <!--      分页内容-->
      <div class="pagination-block">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total,slot, jumper"
          :total="totalNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <div
            class="page-number"
            layout="slot"
          >
            <div class="jump-button">跳至</div>
          </div>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getPurchase } from '@/api/operate.js'
import { formatDateAndTime } from '@/utils/util'
export default {
  data() {
    return {
      // 输入框
      query: '',
      // 默认筛选选项
      lately: '不限',
      frequency: '不限',
      money: '不限',
      level: '不限',
      userLabel: '不限',
      value: '',
      // 选择器
      messageSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      mailSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      pushSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      labelSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      exportData: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      showNumber: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      sortSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      // 表格列表
      tableData: [],
      multipleSelection: [],
      // 分页
      currentPage: 1,
      totalNum: 0,
      pageSize: 6
    }
  },
  created() {
    this.getListData(1, 6)
  },
  methods: {
    // 获取表格数据
    getListData(num, size) {
      getPurchase({
        pageNum: num,
        pageSize: size
      }).then(res => {
        console.log(res)
        for (let i = 0; i < res.data.list.length; i++) {
          res.data.list[i].payTime = formatDateAndTime(res.data.list[i].payTime)
        }
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  font-family: PingFang-SC-Bold;
  width: 100%;
  /*height: 100%;*/
  /*overflow: auto;*/
  padding: 0 110px 0 30px;
  margin: 16px 0;
}

.query {
  width: 100%;
  height: 90px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.query-sure {
  width: 136px;
  height: 40px;
  background: rgba(72, 141, 255, 1);
  margin-left: 30px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.screen {
  width: 100%;
  height: 240px;
  display: flex;
  margin: 50px 0;
  justify-content: space-between;
  flex-direction: column;
}
.screen > div {
  width: 100%;
  height: 32px;
}
.screen > div > p:nth-of-type(1) {
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  margin-left: 25px;
  color: rgba(0, 51, 51, 1);
  display: inline-block;
}
.data-lie {
  position: relative;
  width: 100%;
  /*height: 913px;*/
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 26px 20px 50px 24px;
  margin-bottom: 120px;
}
.data-lie > h1 {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.select-box {
  margin: 26px 0;
  width: 100%;
  height: 40px;
  display: flex;
  flex-flow: row nowrap;
}
.select-box > div {
  width: 116px;
  height: 40px;
  border-radius: 2px;
  margin-right: 40px;
}
.edge {
  width: 100%;
  height: 1px;
  background: rgba(241, 241, 241, 1);
  margin-bottom: 20px;
}
</style>
